import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'

import { SettleSingerWrapper } from './style'
import AreaHeaderV2 from '@/components/area-header-v2/AreaHeaderV2'
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store'
import { fetchDiscoverSingerList } from '@/store/modules/discover'
import SettleSingerItem from '../settleSingerItem/settleSingerItem'


interface IProps {
  children?: ReactNode
}

const ComponentName: FC<IProps> = () => {
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(fetchDiscoverSingerList({ cat: 5001 }))
  }, [])

  const { singerList } = useAppSelector((state) => {
    return {
      singerList: state.discover.singerList
    }
  }, shallowEqualApp)

  // console.log(singerList)

  return (
    <SettleSingerWrapper>
      {/* 头部 */}
      <AreaHeaderV2
        title="入驻歌手"
        moreText="查看更多 &gt;"
        moreLink="/discover/artist"
      ></AreaHeaderV2>
      {/* 主体 */}
      <div className="settle_singer_content">
        {singerList.map(item => {
          return (
            <SettleSingerItem item={item} key={item.id}></SettleSingerItem>
          )
        })}
      </div>
    </SettleSingerWrapper>
  )
}

export default memo(ComponentName)
